<template>
  <div class="ip-info-detail">
    <div class="cover-container">
      <img :src="workData.cover || defaultMengli" alt="">
    </div>
    <InfoContainer :work-data="workData" style="flex: 1;"/>
  </div>
</template>
<script>
import { moneyFilter } from '@/filters/number';
import { format } from '@/filters/date';
import defaultMengli from '@/assets/mengli/defaultMengli.png';

import InfoContainer from './ModuleComponents/InfoItemContainer';
export default {
  filters: { moneyFilter, format },
  components: { InfoContainer },
  props: {
    workData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      defaultMengli
    };
  }
};
</script>
<style lang="scss" scoped>
.ip-info-detail {
  display: flex;
  // align-items: center;
  .cover-container {
    width: 160px;
    height: 160px;
    margin-right: 30px;
    flex-shrink: 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius:8px;
    }
  }
}
.ip-info-list {
  .ip-info-item {
    margin-right: 5px;
    .title {
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:1.2;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
    .content {
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:16px;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &:last-child {
      margin-bottom: 0 !important;
      margin-right: 0;
    }
  }
  &.column {
    .ip-info-item {
      margin-bottom: 40px;
     }
    .title {
      margin-bottom: 20px;
    }
  }
  &.horizontal {
    .ip-info-item {
      display: flex;
      align-items: center;
      margin-bottom: 50px;
      .title {
        width: 95px;
        margin-right: 3px;
      }
      .content {
        flex: 1;
      }
    }
  }
}
// @media screen and (max-width: 1370px){
//   .horizontal {
//     .ip-info-item {
//       display: block !important;
//       margin-bottom: 25px !important;
//       .title {
//         margin-bottom: 9px;
//       }
//     }
//   }
// }
</style>
